import { Divider } from 'antd'
import { fabric } from 'fabric'
import { useEffect } from 'react'

export default function View() {
  // 创建矩形元素
  const rect = new fabric.Rect({
    top: 30,
    left: 30,
    width: 130,
    height: 130,
    fill: 'darkcyan', // 填充暗青色
    stroke: 'red', // 设置描边颜色
    strokeWidth: 10, // 设置描边粗细
    strokeDashArray: [4, 10], // 虚线边框
    shadow: '10px 20px 6px rgba(250, 20, 20, 0.8)' // 元素阴影(x轴偏移量 y轴偏移量 羽化程度 颜色)
  })

  // 创建圆形元素
  const circle = new fabric.Circle({
    top: 30,
    left: 260,
    radius: 30,
    fill: 'white',
    backgroundColor: 'black' // 设置背景色
  })

  // 创建文本元素
  const text = new fabric.Text('雷猴', {
    top: 30,
    left: 360,
    fontSize: 28
  })

  useEffect(() => {
    const canvas = new fabric.Canvas('c', {
      width: 1000,
      height: 1000
    })
    canvas.add(rect)
    canvas.add(circle)
    canvas.add(text)
  }, [])

  return (
    <div className='view-wrapper'>
      <Divider plain>图片</Divider>
      <canvas id='c' style={{ border: '1px solid #ccc' }}></canvas>
    </div>
  )
}
